<template>
    <div class="changeBox">
        <span>{{ data.name }}</span>
        <div class="flex">
            <div v-for="item in data.data" v-bind:class="{'active':(data.selected)===item.value}" @click="$emit('titleChange',item.value)">{{ item.name }}</div>
        </div>
    </div>
</template>

<script setup>
    const props = defineProps(['data'])
</script>

<style scoped>
    .changeBox{
        height: 22px;
        font-size: 12px;
        line-height: 22px;
        margin-bottom: 2vh;
    }

    .changeBox>span{
        float: left;
        margin-left: 1vw;
    }

    .changeBox>div{
        float: right;
    }

    .changeBox>div>div{
        width: 5vw;
        background-color: #eee;
        border: 1px solid #ccc;
        text-align: center;
    }

    .changeBox>div>.active{
        background-color: #FAE0CC;
        color:#C0773D;
        border-color: #FAE0CC;
    }
</style>